<template>
    <div style="width: 100%;height: 100%;" class="reset-pwd-container">
        <div v-show="enterEmail" class="reset-pwd-main">
            <div class="reset-pwd-header">
                <img @click="goBackLogin" class="reset-pwd-header-img" src="../assets/imgs/icon/arrow_back_24px.png" alt="">
                <p style="font-size: 16px;color: #E6E0E9;">Back</p>
            </div>
            <div style="display: flex;flex-direction: column;padding-left: 34px;">
                <p style="font-size: 18px;font-weight: 700;margin-bottom: 32px;">Reset Password</p>
                <div class="reset-pwd-first-form">
                    <div>
                        <p>Enter your email address </p>
                        <p>and we'll send you the reset link.</p>
                    </div>
                    <el-input style="margin: 32px 0 60px 0;" v-model="emailIpt" placeholder="Email Address"></el-input>
                    <el-button :disabled="sendDis" :style="{ 'background-color': sendBackround }"
                        @click="sendEmailToResetPwd" class="send-btn">Send</el-button>
                    <el-button @click="goBackLogin"
                        style="background-color: #292438;color: #107DFB;border: 1px solid #fff;margin-top: 20px;"
                        class="send-btn">Back</el-button>
                </div>
            </div>
        </div>
        <div v-show="resetPwdExplain" class="resend-link-main">
            <div class="reset-pwd-header">
                <img @click="goBack" class="reset-pwd-header-img" src="../assets/imgs/icon/arrow_back_24px.png" alt="">
                <p style="font-size: 16px;color: #E6E0E9;">Back</p>
            </div>
            <div style="display: flex;flex-direction: column;padding-left: 34px;height: 100%;">
                <p style="font-size: 18px;font-weight: 700;margin-bottom: 32px;color: #fff;">Reset Password</p>
                <div>
                    <p>Enter We have sent a secure link to <span style="color:#107DFB ;">{{ emailIpt }}</span>. Please check
                        your
                        inbox and reset your
                        password.
                        email address </p>
                    <p> If you cannot see our Email, check your spam folder</p>
                </div>
                <div style="flex: 1;display: flex;flex-direction: column;padding: 20px 0;">
                    <el-input @focus="verifyCodeError = false" v-model="verifyCode" placeholder="reset-code"></el-input>
                    <p v-show="verifyCodeError" style="color: red;font-size: 12px;">The
                        reset-code is incorrect, please try
                        again</p>
                    <el-button @click="continueResetPwd"
                        style="background-color: #107DFB;color: #fff;border: none;margin-top: 32px;"
                        class="send-btn back-to-login">Continue</el-button>
                    <el-button style="background-color: #107DFB;color: #fff;border: none;margin-top: 32px;" :plain="true"
                        class="resend-link resend-link-btn" @click="resendLink">Resend Link</el-button>
                </div>
            </div>
        </div>
        <div v-show="resetPwdPage" style="height: 100%;width: 100%;">
            <!-- 验证码验证通过后的密码重置操作 -->
            <div class="reset-pwd-header">
                <img @click="backToContinue" class="reset-pwd-header-img" src="../assets/imgs/icon/arrow_back_24px.png"
                    alt="">
                <p style="font-size: 16px;color: #E6E0E9;">Back</p>
            </div>
            <div style="display: flex;flex-direction: column;padding-left: 34px;">
                <p style="font-size: 18px;font-weight: 700;margin-bottom: 32px;">Reset Password</p>
                <div class="reset-pwd-first-form">
                    <div>
                        <p>New password </p>
                    </div>
                    <el-input @focus=" focusToCheckNewPwd = false" style="margin: 32px 0 0 0;" type="password"
                        v-model="newPassword" show-password placeholder="New password"></el-input>
                    <el-input @focus=" focusToCheckNewPwd = false" style="margin: 32px 0 0 0;" type="password" show-password
                        v-model="confirmPassword" placeholder="Confirm your new password"></el-input>
                    <p v-show="focusToCheckNewPwd" style="color: red;font-size: 12px;">The two inputs
                        are inconsistent,
                        please check</p>
                    <el-button @click="saveNewPwd" :disabled="resetPwdDis" style="margin-top: 32px;"
                        :style="{ 'background-color': changeStatus }" class="send-btn">Save</el-button>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { resetPwd, reset_password_resend, reset_password_update, reset_password_check } from '../apis/user.js'
import { ElMessage } from 'element-plus'

const enterEmail = ref(true)
const resetPwdExplain = ref(false)
const emailIpt = ref('test@test.com')
const verifyCode = ref('')
const verifyCodeError = ref(false)
const newPassword = ref('')
const confirmPassword = ref('')
const resetPwdPage = ref(false)
const changeStatus = ref('#ccc')
const resetPwdDis = ref(true)
const focusToCheckNewPwd = ref(false)
const sendDis = ref(true)
const sendBackround = ref('#ccc')
const router = useRouter()
const goBackLogin = () => {
    router.go(-1)
}
const goBack = () => {
    enterEmail.value = true
    resetPwdExplain.value = false
    emailIpt.value = 'test@test.com'
}
watch(() => [newPassword.value, confirmPassword.value, emailIpt.value], (newVal, oldVal) => {
    if (newVal[0] !== '' && newVal[1] !== '') {
        changeStatus.value = '#107DFB'
        resetPwdDis.value = false
    } else {
        changeStatus.value = '#ccc'
        resetPwdDis.value = true
    }
    if (newVal[2] === '') {
        sendDis.value = true
        sendBackround.value = '#ccc'
    } else {
        sendDis.value = false
        sendBackround.value = '#107DFB'
    }
})
const saveNewPwd = () => {
    if (newPassword.value !== confirmPassword.value) {
        focusToCheckNewPwd.value = true
    }
}
const sendEmailToResetPwd = async () => {
    enterEmail.value = false
    resetPwdExplain.value = true
    if (emailIpt.value !== '') {
        let res = await reset_password_resend({ email: emailIpt.value })
        if (res.data.code === 0) {
            enterEmail.value = false
            resetPwdExplain.value = true

        } else {
            ElMessage({
                message: 'Error Email!',
                type: 'error',
            })
        }
    }
}

const resendLink = async () => {
    let result = await reset_password_resend({ email: emailIpt.value })
    if (result.data.code === 0) {
        ElMessage({
            message: 'Resend Success!',
            type: 'success',
        })
    } else {
        ElMessage({
            message: 'Resend Failed!',
            type: 'error',
        })
    }
}
const backToContinue = () => {
    resetPwdPage.value = false
    resetPwdExplain.value = true
}
const continueResetPwd = async () => {

    if (verifyCode.value !== '') {
        let res = await reset_password_check({ email: emailIpt.value, reset_code: verifyCode.value })
        if (res.data.code === 0) {
            resetPwdPage.value = true
            resetPwdExplain.value = false
        } else if (res.data.code === 500) {
            ElMessage({
                message: 'system error,please try again later',
                type: 'error',
            })
        } else {
            verifyCodeError.value = true
        }
    } else {
        verifyCodeError.value = true
    }
}
</script>

<style lang="scss" scoped>
.reset-pwd-container {
    width: 100%;
    height: 100%;
    background-color: #292438;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;

    .el-button,
    .el-input {
        width: 100%;
        height: 56px;
        margin: 0;
    }

    .reset-pwd-header {
        height: 64px;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;

        .reset-pwd-header-img {
            width: 24px;
            height: 24px;
            cursor: pointer;
        }
    }

    .reset-pwd-main {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 34px 0 0;
        width: 100%;

        .reset-pwd-first-form {
            height: 100%;
            font-size: 14px;
            color: #88889D;
            display: flex;
            flex-direction: column;
        }

        .el-input {
            width: 100%;
            height: 56px;
            color: #CAC4D0;

            // border: 1px solid #938F99;
            // border-radius: 4px;
        }

        .send-btn {
            width: 100%;
            height: 56px;
            background-color: #107DFB;
            border: none;
            color: #fff;
        }

        .back-to-login {
            width: 100%;
            margin-top: 100px;
        }



    }

    .resend-link-main {
        width: 100%;
        height: 100%;
        font-size: 14px;
        color: #88889D;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 34px 0 0;

        .resend-link {
            height: 56px;
            background-color: #292438;
            border: 1px solid #938F99;
            color: #107DFB;

        }
    }
}

.send-btn {
    width: 100%;
    height: 56px;
    background-color: #107DFB;
    border: none;
    color: #fff;
}

.resend-link-btn {
    background-color: #107DFB;
    color: #fff;
}

:deep(.el-input__wrapper) {
    background-color: #292438;
    outline: none;
    border: none;
    border: 1px solid #938F99;
}

:deep(.el-input__inner) {
    border: none;
    outline: none;

    color: #fff;
}
</style>